@import url('https://fonts.googleapis.com/css?family=Oxygen:400,700');

body{
	background-color: #D5DFE5;
	font-family: "Oxygen";
}

.field{
	/* using flexbox allows for the input field and the button line to line up together in a row */
	display: flex;
	position: relative;
	margin: 5em auto;
	width: 50%;
	flex-direction: row;
	box-shadow:
		1px 1px 0 #6174a8,
		2px 2px 0 #6174A8,
		3px 3px 0 #6174A8,
		4px 4px 0 #6174A8,
		5px 5px 0 #6174A8,
		6px 6px 0 #6174A8,
		7px 7px 0 #6174A8
	;
/* these box shadows (with no blur values) give the field div the 3D effect */
}

.field>input[type=text]{
	flex: 1; /* setting the flex value to 1 means that this element will be the first in the row, regardless of its order in the HTML markup of the .field div */
	padding: 0.6em;
	border: 0.2em solid #7B8BB7;
	font-style: italic;
	font-size: 16px;
}

.field>button{
	padding: 0.6em 0.8em;
	background-color: #7B8BB7;
	color: white;
	border: none;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
}

.field>input[type=text]:focus, .field>button{
	outline: none;
}